<template>
  <h1>生命周期钩子</h1>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, onUpdated } from 'vue'

// setup 里面没有 created 和 beforeCreate 了
console.log('setup 默认会执行')

onMounted(() => {
  console.log(1, 'mounted~')
})

// Vue3 组合式API的声明周期钩子允许被多次调用(书写)
onMounted(() => {
  console.log(2, 'mounted~')
})

onUpdated(() => {
  console.log('update~')
})

// Vue2 的组件销毁 destroyed  被改名称了 卸载 unmounted
onUnmounted(() => {
  console.log('unmounted')
})
</script>